<template>
    <canvas ref="inkCanvas" class="ink-canvas"></canvas>
</template>

<script setup>
import { onMounted, ref } from "vue";
const inkCanvas = ref(null);

function drawMountain(
    ctx,
    width,
    height,
    baseY,
    color,
    alpha,
    roughness = 0.008,
    heightFactor = 0.18
) {
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(0, height);
    ctx.lineTo(0, baseY);
    let x = 0;
    while (x < width) {
        const y =
            baseY -
            Math.sin(x * roughness + Math.random() * 0.5) *
                (height * heightFactor * (0.7 + Math.random() * 0.6));
        ctx.lineTo(x, y);
        x += 2 + Math.random() * 4;
    }
    ctx.lineTo(width, baseY);
    ctx.lineTo(width, height);
    ctx.closePath();
    ctx.globalAlpha = alpha;
    ctx.filter = "blur(2.5px)";
    ctx.fillStyle = color;
    ctx.fill();
    ctx.filter = "none";
    ctx.restore();
}

function drawMist(ctx, width, height, baseY, alpha = 0.12) {
    ctx.save();
    ctx.globalAlpha = alpha;
    ctx.filter = "blur(12px)";
    for (let i = 0; i < 6; i++) {
        const x = Math.random() * width;
        const y = baseY - 30 + Math.random() * 60;
        const r = 80 + Math.random() * 120;
        ctx.beginPath();
        ctx.arc(x, y, r, 0, 2 * Math.PI);
        ctx.fillStyle = "#bbb";
        ctx.fill();
    }
    ctx.filter = "none";
    ctx.restore();
}

onMounted(() => {
    const canvas = inkCanvas.value;
    const ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    const width = canvas.width;
    const height = canvas.height;

    // 鼠标坐标
    let mouse = { x: -1000, y: -1000 };
    canvas.addEventListener("mousemove", (e) => {
        const rect = canvas.getBoundingClientRect();
        mouse.x = e.clientX - rect.left;
        mouse.y = e.clientY - rect.top;
    });
    canvas.addEventListener("mouseleave", () => {
        mouse.x = -1000;
        mouse.y = -1000;
    });

    // 背景渐变
    // 创建一个从上到下的线性渐变对象
    const grad = ctx.createLinearGradient(0, 0, 0, height);

    // 雪花参数
    const snowflakes = [];
    const snowCount = 30;
    for (let i = 0; i < snowCount; i++) {
        // 随机生成雪花类型：0=圆形，1=分叉雪花
        const type = Math.floor(Math.random() * 2);
        snowflakes.push({
            x: Math.random() * width, // 雪花初始横坐标
            y: Math.random() * height, // 雪花初始纵坐标
            r: 2 + Math.random() * 4, // 雪花大小
            speed: 0.5 + Math.random() * 1, // 下落速度
            drift: Math.random() * 1.5 - 0.75, // 水平漂移速度
            type, // 雪花形状类型
        });
    }

    function drawSnow() {
        ctx.clearRect(0, 0, width, height);
        ctx.fillStyle = grad;
        ctx.fillRect(0, 0, width, height);
        for (let flake of snowflakes) {
            ctx.save();
            ctx.globalAlpha = 0.7;
            ctx.shadowColor = "#fff";
            ctx.shadowBlur = 8;
            // 根据 type 绘制不同形状的雪花
            if (flake.type === 0) {
                // 0: 圆形雪花
                ctx.beginPath();
                ctx.arc(flake.x, flake.y, flake.r, 0, 2 * Math.PI);
                ctx.fillStyle = "#fff";
                ctx.fill();
            } else {
                // 1: 分叉雪花
                for (let i = 0; i < 6; i++) {
                    const angle = (Math.PI / 3) * i;
                    ctx.beginPath();
                    ctx.moveTo(flake.x, flake.y);
                    ctx.lineTo(
                        flake.x + Math.cos(angle) * flake.r * 1.5,
                        flake.y + Math.sin(angle) * flake.r * 1.5
                    );
                    ctx.strokeStyle = "#fff";
                    ctx.lineWidth = 1.2;
                    ctx.stroke();
                    // 分叉
                    for (let b = -1; b <= 1; b += 2) {
                        const branchAngle = angle + (b * Math.PI) / 8;
                        ctx.beginPath();
                        ctx.moveTo(
                            flake.x + Math.cos(angle) * flake.r * 0.8,
                            flake.y + Math.sin(angle) * flake.r * 0.8
                        );
                        ctx.lineTo(
                            flake.x + Math.cos(branchAngle) * flake.r * 1.1,
                            flake.y + Math.sin(branchAngle) * flake.r * 1.1
                        );
                        ctx.strokeStyle = "rgba(255,255,255,0.7)";
                        ctx.lineWidth = 1;
                        ctx.stroke();
                    }
                }
            }
            ctx.restore();
            // 雪花避开鼠标
            const dx = flake.x - mouse.x;
            const dy = flake.y - mouse.y;
            const dist = Math.sqrt(dx * dx + dy * dy);
            // 避让范围，数值越大雪花避让距离越远
            const avoidRadius = 80 + flake.r * 2; // 例如 60 可调大或调小
            // 只在鼠标在画布内且距离足够近时才计算避让
            if (mouse.x >= 0 && mouse.y >= 0 && dist < avoidRadius) {
                const angle = Math.atan2(dy, dx);
                const force = ((avoidRadius - dist) / avoidRadius) * 4.5;
                flake.x += Math.cos(angle) * force;
                flake.y += Math.sin(angle) * force;
            }
            // 雪花下落和漂移
            flake.y += flake.speed;
            flake.x += flake.drift;
            // 超出底部则重置到顶部
            if (flake.y > height) {
                flake.y = -flake.r;
                flake.x = Math.random() * width;
            }
            // 超出左右边界则循环
            if (flake.x < 0) flake.x = width;
            if (flake.x > width) flake.x = 0;
        }
        setTimeout(drawSnow, 1000 / 60); // 30FPS，每帧间隔约33ms
    }
    drawSnow();
});
</script>

<style scoped>
.ink-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    display: block;
}
</style>
